<template>
	<view class="template-study tn-safe-area-inset-bottom">
		<!-- 添加"我的"图标 -->
		<view class="my-icon" @tap="navigateToMy">
			<text class="tn-icon-my"></text>
		</view>
		<!-- 轮播图 -->
		<swiper class="card-swiper" :circular="true" :autoplay="true" duration="500" interval="18000"
			@change="cardSwiper" :current="cardCur" ref="swiperRef">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''"
				@click="handleSwiperItemClick(item.id)">
				<view class="swiper-item image-banner">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				</view>
				<view class="swiper-item2 image-banner">
					<image class="png-sussuspension" :src="item.pngurl" mode="modefix" v-if="item.type=='image'">
					</image>
				</view>
				<view class="swiper-item-text">
					<view class="text-sussuspension">
						<view class="tn-text-xxl tn-color-white">{{item.name}}</view>
						<view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 60rpx;">
							{{item.title}}
						</view>
						<view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">
							{{item.text}}
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 左右箭头 -->
		<view class="arrow left-arrow" @click="prevSlide">
			<!-- 假设上图鸟 UI 左箭头图标组件名为 tnb-icon-left -->
			<text class="tn-icon-left" style="font-size: 48rpx; color: white;"></text>
		</view>
		<view class="arrow right-arrow" @click="nextSlide">
			<!-- 假设上图鸟 UI 右箭头图标组件名为 tnb-icon-right -->
			<text class="tn-icon-right" style="font-size: 48rpx; color: white;"></text>
		</view>

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import api from '@/utils/index.js'

	export default {
		name: 'TemplateStudy',
		mixins: [template_page_mixin],
		data() {
			return {
				cardCur: 0,
				// 分页参数
				dataForm: {
					pageNum: 1,
					pageSize: 10
				},
				// 轮播图数据，改为空数组，等待接口返回数据
				swiperList: []
			}
		},
		// 页面加载时获取数据
		onLoad() {
			this.getCharaterList()
		},
		methods: {
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// 上一张
			prevSlide() {
				if (this.cardCur > 0) {
					this.cardCur--;
				} else {
					this.cardCur = this.swiperList.length - 1;
				}
			},
			// 下一张
			nextSlide() {
				if (this.cardCur < this.swiperList.length - 1) {
					this.cardCur++;
				} else {
					this.cardCur = 0;
				}
			},
			// 处理swiper-item点击事件
			handleSwiperItemClick(id) {
				// // 找到当前点击的轮播图信息
				// const currentItem = this.swiperList.find(item => item.id === id);
				// if (currentItem) {
				console.log('id:', id);
				
					// 跳转到子页面，这里假设子页面路径为 '/pages/detail/detail'，并传递id参数
				uni.navigateTo({
					url: `/homePages/charaterDetail?personId=${id}`
				});
				// }
			},
			// 添加导航到"我的"页面的方法
			navigateToMy() {
				console.log('点击了"我的"图标');
				uni.navigateTo({
					url: '/pages/mine/mine',
					success: (res) => {
						console.log('跳转成功', res);
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						// 尝试使用 reLaunch
						uni.reLaunch({
							url: '/pages/mine/mine',
							fail: (err2) => {
								console.error('reLaunch也失败了:', err2);
							}
						});
					}
				});
			},
			// 获取角色列表
			async getCharaterList() {
				try {
					const res = await api.index.getCharater(this.dataForm)
					console.log('角色列表数据：', res)
					if (res.data.code === 200) {  // 移除 .data
						// 确保返回的数据存在且是数组
						console.log('res.data.rows.list:', res.data.rows)
						const list = res.data.rows
						this.swiperList = list.map((item, index) => {
							return {
								id: item.id || index,
								type: 'image',
								title: item.title || '',
								name: item.name || '',
								text: item.text || '',
								url: item.url || '/static/index/1.png',  // 添加默认图片
								pngurl: item.pngurl || '/static/index/1-small.png'  // 添加默认图片
							}
						})
					} else {
						uni.showToast({
							title: res.msg || '获取角色列表失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('获取角色列表错误:', error)
					uni.showToast({
						title: '获取角色列表失败',
						icon: 'none'
					})
				}
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	/* 整体页面布局 */
	.template-study {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		overflow: hidden;
	}

	/* 轮播图样式 */
	.card-swiper {
		flex: 1;
		height: 100vh !important;
		width: 100vw !important;
	}

	.card-swiper swiper-item {
		height: 100vh !important; // 确保每个轮播项高度占满屏幕
		width: 100vw !important;
	}

	/* 图片容器 */
	.swiper-item {
		height: 100% !important;
		width: 100% !important;
	}

	.image-banner image {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		/* 关键属性 */
		display: block !important;
		/* 修复空白间隙 */
	}

	/* 左右箭头样式 */
	.arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 30px;
		height: 30px;
		cursor: pointer;
		z-index: 10;
	}

	.left-arrow {
		left: 10px;
	}

	.right-arrow {
		right: 10px;
	}

	/* 其他样式保持不变 */
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 内容 */
	.study-wrap {
		position: relative;
		z-index: 1;
		margin-top: -90rpx;
	}

	/* 阴影 start*/
	.study-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 悬浮 */
	.png-sussuspension {
		width: 750rpx !important;
		height: 900rpx !important;
		animation: suspension 3s ease-in-out infinite;
		object-fit: contain;
	}

	@keyframes suspension {

		0%,
		100% {
			transform: translate(0, 0);
		}

		50% {
			transform: translate(-0.4rem, 0.5rem);
		}
	}

	.text-sussuspension {
		animation: suspension2 4s ease-in-out infinite;
	}

	@keyframes suspension2 {

		0%,
		100% {
			transform: translate(0, 0);
		}

		50% {
			transform: translate(0rem, 0.5rem);
		}
	}

	/* 轮播视觉差 start */
	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 667px;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}

	.card-swiper swiper-item .swiper-item2 {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 0rpx;
		transform: translate(260rpx, -30%) scale(0.3, 0.3);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}

	.card-swiper swiper-item.cur .swiper-item2 {
		transform: translate(260rpx, -30%) scale(0.5, 0.5);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}

	.card-swiper swiper-item .swiper-item-text {
		position: absolute;
		bottom: 15%;
		left: 0;
		width: 100%;
		padding: 0 40rpx;
		box-sizing: border-box;
		transform: scale(0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}

	.card-swiper swiper-item.cur .swiper-item-text {
		bottom: 15%;
		transform: scale(0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		height: 100%;
	}

	/* 修改图片容器样式 */
	.swiper-item2.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	/* 如果需要的话，可以给图片添加额外的样式来微调 */
	.swiper-item2.image-banner image {
		max-width: 100%;
		max-height: 100%;
	}

	/* 标签内容 start*/
	.tn-tag-content {
		border-radius: 8rpx 25rpx 25rpx 8rpx;
		display: inline-block;
		line-height: 35rpx;
		padding: 8rpx 25rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.swiper-item-text {
		.text-sussuspension {
			padding: 30rpx;
			/* 添加文字阴影，提高可读性 */
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

			/* 名字文字样式 */
			.tn-text-xxl {
				font-size: 60rpx !important;
				margin-bottom: 20rpx;
				line-height: 1.2;
				font-weight: 800; // 加粗
				color: #FFD700 !important; // 金色，突出显示
				// background: linear-gradient(45deg, #FFD700, #FFA500);
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
			}

			/* 标题文字样式 */
			.tn-text-bold {
				font-size: 50rpx !important;
				line-height: 1.2;
				margin-bottom: 20rpx;
				color: #f3f3f3 !important; // 淡紫色
				font-weight: 600;
			}

			/* 描述文字样式 */
			.tn-text-sm {
				font-size: 32rpx !important;
				line-height: 1.5;
				letter-spacing: 2rpx;
				color: rgba(255, 255, 255, 0.9) !important; // 半透明白色
				// background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0.8));
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
			}
		}
	}

	/* 左右箭头样式 */
	.arrow {

		.tn-icon-left,
		.tn-icon-right {
			font-size: 48rpx;
			color: #ffffff !important; // 金色
			opacity: 0.8;
			transition: all 0.3s ease;
			font-weight: 600;

			&:hover {
				opacity: 1;
				transform: scale(1.1);
			}
		}
	}

	/* 添加"我的"图标样式 */
	.my-icon {
		position: fixed;
		top: var(--status-bar-height);
		right: 30rpx;
		z-index: 99;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		/* 图标样式 */
		.tn-icon-my {
			font-size: 46rpx;
			color: #FFFFFF;
			text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.4);
			transition: all 0.3s ease;

			/* 点击效果 */
			&:active {
				transform: scale(0.92);
			}
		}

		/* 可选：添加背景效果 */
		&::after {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.2);
			border-radius: 50%;
			z-index: -1;
			opacity: 0;
			transition: all 0.3s ease;
		}

		/* 悬停效果 */
		&:active::after {
			opacity: 1;
		}
	}
</style>